<template>
  <div class="sidebar">
    <el-menu
      class="sidebar-el-menu"
      :default-active="onRoutes"
      :collapse="collapse"
      background-color="#409eff"
      text-color="#ffffff"
      active-text-color="#000"
      unique-opened
      router>
      <!--一级菜单-->
      <template v-for="item in items">
        <el-submenu
          v-if="item.children && item.children.length"
          :index="item.id"
          :key="item.id">
          <template slot="title">
            <i :class="item.icon"></i>
            <span>{{ item.label }}</span>
          </template>

          <!--二级菜单-->
          <template v-for="itemChild in item.children">
            <el-submenu
              v-if="itemChild.children && itemChild.children.length"
              :index="itemChild.id"
              :key="itemChild.id">
              <template slot="title">
                <i :class="itemChild.icon"></i>
                <span>{{ itemChild.label }}</span>
              </template>
              <!--三级菜单-->
              <el-menu-item
                v-for="itemChild_child in itemChild.children"
                :index="itemChild_child.id"
                :key="itemChild_child.id"
                @click="cclick(itemChild_child)">
                <i :class="itemChild.icon"></i>
                <span slot="title">{{ itemChild_child.label }}</span>
              </el-menu-item>
            </el-submenu>
            <!-- 让其余的二级菜单点击出数据 -->
            <el-menu-item
              v-else
              :index="itemChild.id"
              :key="itemChild.url"
              @click="cclick(itemChild)"
              >
              <i :class="itemChild.icon"></i>
                <span slot="title"> {{ itemChild.label }}</span>
             </el-menu-item
            >
          </template>
        </el-submenu>
        <el-menu-item v-else :index="item.id" :key="item.url">
          <i :class="item.icon"></i>
          <span slot="title">{{ item.label }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
import bus from "./bus";
export default {
  data() {
    return {
      collapse: false,
      items: []
    };
  },
  computed: {
    onRoutes() {
      return this.$route.path.replace("/", "");
    },
  },
  created() {
    //让_this等于当前vue对象
    var _this = this;
    //初始化查询左侧树
    this.$http
      .get("/menu/queryTreeNodeByUserId")
      //指定请求的url及参数  get
      .then(function (response) {
        //正确返回对象的处理
        //JSON.stringify   把json转换为json字符串，方便查看
        console.log(JSON.stringify(response));
        //直接使用this 会指 axios对象  错误
        // this.tableData
        //判断返回值是否正确
        if (response.data.code == 200) {
          _this.items = response.data.data;
        }
      });
    // 通过 Event Bus 进行组件间通信，来折叠侧边栏
    bus.$on("collapse", (msg) => {
      this.collapse = msg;
    });
  },
 methods: {
    cclick(t) {
      if (
        t.url != null &&
        t.url != "" &&
        t.url != "null" &&
        t.url != "undefined"
      ) {
        //当点击左侧菜单时，添加页签
        // this.addTab(t1, t);
        this.$router.push(t.url);
      }
    },

    // //添加标签
    // addTab(targetName, url) {
    //   this.$router.push(url);
    // },
  },
  }
</script>

<style scoped>
.sidebar {
  font-family: 'LMQY';
  display: block;
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
  width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
  width: 200px;
}
.sidebar > ul {
  height: 100%;
}
i{
  color:white;
}
</style>
